<template>
   <el-row :gutter="40">
    <el-col :span="6">
      <div class="grid-content ep-bg-purple h change1">
        <div class="lef-icon icon1">
          <el-icon><Avatar /></el-icon>
        </div>
        <div class="rig">
          <h4>访客</h4>
          <h3>102,400</h3>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content ep-bg-purple h change2">
        <div class="lef-icon icon2">
          <el-icon><Comment /></el-icon>
        </div>
        <div class="rig">
          <h4>消息</h4>
          <h3>81,212</h3>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content ep-bg-purple h change3">
        <div class="lef-icon icon3">
          <el-icon><Ticket /></el-icon>
        </div>
        <div class="rig">
          <h4>金额</h4>
          <h3>9,280</h3>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content ep-bg-purple h change4">
        <div class="lef-icon icon4">
          <el-icon><BellFilled /></el-icon>
        </div>
        <div class="rig">
          <h4>订单</h4>
          <h3>13,600</h3>
        </div>
      </div>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24"><div ref="echart1" class="grid-content ep-bg-purple-dark chart1" /></el-col>
  </el-row>
  <el-row :gutter="40">
    <el-col :span="10"><div ref="echart2" class="grid-content ep-bg-purple chart1" /></el-col>
    <el-col :span="14"><div class="grid-content ep-bg-purple" />
      <baidu-map class="map" center="合肥">
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
      </baidu-map>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'DashBoard',
  data () {
    return {
      lineChart: null,
      pieChart: null
    }
  },
  methods: {
    // 折线图
    initLine () {
      const lineChart = this.$echarts.init(this.$refs.echart1)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLine: {
            lineStyle: {
              color: '#55B1DE'
            }
          }
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: '#55B1DE'
            }
          },
          nameTextStyle: {
            color: '#13C2C2'
          }
        },
        series: [
          {
            name: 'expected',
            type: 'line',
            smooth: true,
            data: [100, 120, 161, 134, 105, 160, 165]
          },
          {
            name: 'actual',
            type: 'line',
            smooth: true,
            data: [120, 82, 91, 154, 222, 120, 105]
          }
        ],
        color: ['#FF005A', '#3888FA'],
        legend: {
          show: true,
          top: 20
        }
      }
      lineChart.setOption(option)
      this.lineChart = lineChart
    },
    // 饼状图
    initPie () {
      const pieChart = this.$echarts.init(this.$refs.echart2)
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          top: 'bottom'
        },
        series: [
          {
            name: 'Area Mode',
            type: 'pie',
            radius: [5, 110],
            center: ['50%', '50%'],
            roseType: 'redius',
            itemStyle: {
              borderRadius: 5
            },
            data: [
              { value: 30, name: 'Forex' },
              { value: 28, name: 'Indestries' },
              { value: 26, name: 'Technology' },
              { value: 24, name: 'Gold' },
              { value: 22, name: 'Forecasts' }
            ]
          }
        ]
      }
      pieChart.setOption(option)
      this.pieChart = pieChart
    }
  },
  mounted () {
    this.initLine()
    this.initPie()
  }
}
</script>

<style lang="scss" scoped>
.el-row{
  margin-bottom: 30px;
}
.grid-content{
  background-color: #F0F2F5;
}
.h{
  height: 80px;
  display: flex;
  padding:20px;
  cursor: pointer;
  .lef-icon{
    border-radius: 10px;
    height: 100%;
    width: 43%;
    display: flex;
    .el-icon{
      font-size: 50px;
      margin: auto;
    }
  }
  .rig{
    margin-left: 20px;
    h4{
      color:#8C8C8C;
      margin: 10px 0;
    }
    h3{
      color:#666666
    }
  }
}
.chart1{
  height: 350px;
  width: 100%;

}
.map {
  width: 100%;
  height: 350px;
}
.change1{
  &:hover .icon1{
    background-color: #B6A2DE;
    color:#fff
  }
  .icon1{
  color:#B6A2DE;
  }
}
.change2{
  &:hover .icon2{
    background-color: #36A3F7;
    color:#fff
  }
  .icon2{
  color:#36A3F7;
  }
}
.change3{
  &:hover .icon3{
    background-color: #F4516C;
    color:#fff
  }
  .icon3{
  color:#F4516C;
  }
}
.change4{
  &:hover .icon4{
    background-color: #34BFA3;
    color:#fff
  }
  .icon4{
  color:#34BFA3;
  }
}
</style>
